<template>
  <div class="dashboard-container">
    <main class="dashboard-main">
      <!-- 订单数据 -->
      <OrderData />
      <!-- 复购单统计 -->
      <ReorderStic />
      <!-- 其他信息:今日待跟进,订单复购分析,大单占比,ROI转化,库存预警 -->
      <div class="other-info">
        <div class="other-info-left">
          <div class="other-info-left-item">
            <TodayFollowUp />
          </div>
          <div class="other-info-left-item">
            <CompositionPerformance />
          </div>
          <div class="other-info-left-item">
            <BigOrderRatio />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
// 订单数据
import OrderData from "./components/orderData.vue";
// 复购单统计
import ReorderStic from "./components/reorderStic.vue";
// 今日待跟进
import TodayFollowUp from "./components/todayFollowUp.vue";
// 大单占比
import BigOrderRatio from "./components/bigOrderRatio.vue";
// 业绩组成
import CompositionPerformance from "./components/compositionPerformance.vue";
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: scroll;
}

.dashboard-main {
  flex: 1;

  .other-info {
    display: flex;
    margin-top: 10px;

    .other-info-left {
      flex: 1;
      // 一排展示俩
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;

      .other-info-left-item {
        border-radius: 8px;
        overflow: hidden;
      }
    }
    .other-info-right {
      width: 396px;
      height: 696px;
      border-radius: 8px;
      margin-left: 10px;
    }
  }
}
</style>
